<template>
  <div class="address">
    <div class="address_title">{{$t("active.activeAddress")}}</div>
    <div class="address_1">{{$t("active.inviterAddress")}}</div>
    <div class="address_input">
      <input type="text" :placeholder="$t('active.inputTips')" v-model="inviterAddress" class="txt"/>
    </div>
    <div class="union_tips">
      <div style="">{{$t("active.tips")}}</div>
      <div style="padding: 0 10px; line-height:1.8;word-break: break-all">{{$t("active.msg")}}</div>
    </div>
    <button class="union_join" @click="active">{{$t("active.bind")}}</button>
  </div>
</template>

<script>
  import http from "../../../../http";
  export default {
    props: {
      params: {
        type: Object,
        default: {}
      }
    },
    data(){
      return{
        inviterAddress: ''
      }
    },
    mounted() {
      if(this.params.address){
        this.inviterAddress = this.params.address;
      }
    },
    methods: {
      active: async function(){
        let inviterAddress = this.inviterAddress;
        if(inviterAddress === ''){
          Toast(this.$t("active.inputTips"));
          return;
        }
        let res = await http.post(`/api/user/active?inviteAddress=` + inviterAddress);
        if (res.code === 200) {
          Toast(this.$t("operationSuccess"));
          this.$store.commit("changeOverlay", false);
          if(this.params.invite){
            this.$router.replace("/InvitationCode?t=" + new Date().getTime())
          }
        }
      }
    }
  }

</script>

<style scoped lang="scss">
  .txt{
    color: #fff;
    font-size: 14px;
  }
.address {
  width: 345px;
  height: 376px;
  background-color: #100d0d;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: absolute;
  top: 63px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 15px 0;
}
.address_title {
  font-size: 20px;
  color: $color;
  @include fontSCMedium;
}
.address_1 {
  width: 98px;
  height: 20px;
  font-size: 14px;
  @include fontSCRegular;
  font-weight: 400;
  color: $color1;
  margin-top: 24px;
}
.address_input {
  position: relative;
  margin-top: 20px;
  input {
    width: 315px;
    height: 44px;
    border-radius: 2px;
    border: 1px solid $color;
    background-color: #100d0d;
    font-size: 14px;
    padding-left: 10px;
  }
}
.input::-webkit-input-placeholder {
  color: $color1;
  font-size: 13px;
  @include fontSCRegular;
  font-weight: 400;
}
.input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 13px;
  @include fontSCRegular;
  font-weight: 400;
  color: $color1;
}
.input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 13px;
  @include fontSCRegular;
  font-weight: 400;
  color: $color1;
}
.input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 13px;
  @include fontSCRegular;
  font-weight: 400;
  color: $color1;
}
.union_tips {
  width: 315px;
  height: 106px;
  background: rgba(216, 188, 132, 0.43);
  /*opacity: 0.43;*/
  padding: 20px 25px 0 10px;
  font-size: 13px;
  @include fontSCRegular;
  font-weight: 400;
  color: #b0b0b0;
  text-align: left;
  margin-top: 20px;
}
.union_tips > div {
  margin-bottom: 6px;
}
.union_join {
  width: 315px;
  height: 44px;
  background: #d8bc84;
  border-radius: 5px;
  font-size: 17px;
  @include fontSCRegular;
  font-weight: 400;
  color: #0b0b09;
  line-height: 44px;
  margin-top: 30px;
}
</style>
